<template>
  <div>
    <h1>App</h1>
    <button @click="Comp = 'News'">新闻</button>
    <button @click="Comp = 'Music'">音乐</button>
    <button @click="Comp = 'Play'">娱乐</button>
    <!-- 
      在配置动态组件中,当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重新渲染导致的性能问题
      我们更希望动态组件实例能够被在它们第一次被创建的时候缓存下来
      为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来


     -->
    <!-- include代表哪些组件需要被缓存,值可以是一个组件名字符串  -->
    <!-- <keep-alive include="News">
      <component :is="Comp" />
    </keep-alive> -->

    <!-- include代表哪些组件需要被缓存,值可以是一个组件名字符串组成的数组  -->
    <!-- <keep-alive :include="['News', 'Music']">
      <component :is="Comp" />
    </keep-alive> -->

    <!-- exclude代表哪些组件不需要被缓存,值可以是一个组件名字符串或者组成的数组  -->
    <!-- max属性是最大缓存数量 -->
    <keep-alive :exclude="['News']" :max="1">
      <component :is="Comp" />
    </keep-alive>
  </div>
</template>

<script>
import Music from "@/components/Music";
import News from "@/components/News";
import Play from "@/components/Play";
export default {
  name: "App",
  components: {
    Music,
    News,
    Play,
  },
  data() {
    return {
      Comp: "",
    };
  },
};
</script>

<style></style>
